<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="smohan">
	<meta name="homepage" content="https://smohan.im">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>MoCss - 水墨寒的博客</title>
	<link rel="stylesheet" href="../css/mo.css">
	<link rel="stylesheet" href="demo.css">
	<style type="text/css">
		
	</style>
</head>
<body>
	<article class="demo">
		<a class="demo-back mo-button--fluid mo-button--primary" href="index.html">目录</a>
		<header class="demo-header">
			<h1>Mo-Table</h1>
			<p>
				<a href="http://www.kancloud.cn/smohan/mo-css/282362" target="_blank">table文档</a>
			</p>
		</header>
		<main class="demo-body">
			<section class="demo-section">
				<h4>default</h4>
				<table class="mo-table">
					<thead>
						<tr>
							<th>col1</th>
							<th>col2</th>
							<th>col3</th>
							<th>col4</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>col1</td>
							<td>col2</td>
							<td>col3</td>
							<td>col4</td>
						</tr>
					</tbody>
				</table>
				<h4>描边 <code>bordered</code></h4>
				<table class="mo-table--bordered">
					<thead>
						<tr>
							<th>col1</th>
							<th>col2</th>
							<th>col3</th>
							<th>col4</th>
							<th>col5</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>col21</td>
							<td>col22</td>
							<td>col23</td>
							<td>col24</td>
						</tr>
						<tr>
							<td>col31</td>
							<td>col32</td>
							<td>col33</td>
							<td>col34</td>
						</tr>						
					</tbody>
				</table>
				<h4>响应式表格 <code>responsive</code></h4>
				<table class="mo-table--responsive">
					<thead>
						<tr>
							<th>table col1</th>
							<th>table col2</th>
							<th>table col3</th>
							<th>table col4</th>
							<th>table col1</th>
							<th>table col2</th>
							<th>table col3</th>
							<th>table col4</th>
							<th>table col1</th>
							<th>table col2</th>
							<th>table col3</th>
							<th>table col4</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>table col1</td>
							<td>table col2</td>
							<td>table col3</td>
							<td>table col4</td>
							<td>table col1</td>
							<td>table col2</td>
							<td>table col3</td>
							<td>table col4</td>
							<td>table col1</td>
							<td>table col2</td>
							<td>table col3</td>
							<td>table col4</td>
						</tr>
					</tbody>
				</table>
			</section>
		</main>
	</article>

</body>
</html>